<template>
<div class="container">
  <div class="row">
    <div class="col-12 text-right">
      <label class="btn btn-info btn-sm">
        添加
        <input v-model="editing" type="checkbox" class="d-none"/>
      </label>
      <b-modal v-model="editing" title="添加新闻">
        <div class="text-left">
          <div class="form-group">
            <label for="newsTitle">Title</label>
            <input type="text" class="form-control" id="newsTitle" v-model.lazy="editingNews.title"/>
            <small class="form-text text-muted">Edit the title of news.</small>
          </div>
          <div class="form-group">
            <label for="newsDescripton">Description</label>
            <input type="text" class="form-control" id="newsDescripton" v-model.lazy="editingNews.description" />
            <small class="form-text text-muted">Edit the title of news.</small>
          </div>
          
        </div>
        <template v-slot:modal-footer>
          <div class="text-right">
            <button type="submit" class="btn btn-primary" :disabled="!isValidToCreateNews" @click="confirmEditing">Submit</button>
            <label class="btn btn-danger my-0 mx-1">
              Cancel
              <input v-model="editing" type="checkbox" class="d-none"/>
            </label>
          </div>
        </template>
      </b-modal>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <b-card-group deck>
        <b-card
          v-for="data of dataList"
          :key="data._id"
          no-body
          class="mb-2 flex-grow-0"
          style="flex-basis: 30.3%; margin-left: 1.5%; margin-right: 1.5%"
        >
          <b-card-body>
            <b-card-title> {{data.title}} </b-card-title>
            <b-card-text>
              {{data.description}}
            </b-card-text>
          </b-card-body>
          <b-card-footer class="text-right">
            <router-link :to="`/demo/${data._id}`">
              <b-button variant="primary" size="sm">查看</b-button>
            </router-link>
          </b-card-footer>
        </b-card>
      </b-card-group>
    </div>
  </div>
</div>
    
</template>
<script>
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      editingNews: {
        ...this.$store.state.editingNews
      },
    };
  },
  computed: {
    ...mapState({
      dataList: 'newsList',
      
    }),
    ...mapGetters({
      isValidToCreateNews: 'isValidToCreateNews',
    }),
    editing: {
      get() {
        return this.$store.state.isEditing;
      },
      set(value) {
        if (value) {
          this.$store.commit('startEditing');
        } else {
          this.$store.commit('endEditing');
        }
      },
    },
  },
  created() {
    const vm = this;
    vm.$store.dispatch('obtainAllNews');
  },
  methods: {
    async confirmEditing() {
      const vm = this;
      await vm.$store.dispatch('createNews');
      vm.editingNews = {
        ...vm.$store.state.editingNews
      }
    },
  },
  watch: {
    editingNews: {
      deep: true,
      handler() {
        this.$store.commit('updateEditingNews', {
          data: this.editingNews,
        });
      },
    },
  },
}
</script>
<style scoped>

</style>